import { ref, Ref, watchEffect } from 'vue'
import { CtgyActions } from '@/store/actions'
import { ctgyGettersProxy } from '@/store/getters'
import { FirstCtgy, SecondCtgy } from '@/store/state'

class FstToThrdCtgy {
  static firstCtgyList: Ref<FirstCtgy[]> = ref([])
  static firstCtgyActiveIndex = ref<number>(0)
  static secondCtgyList: Ref<SecondCtgy[]> = ref([])

  static async getFirstCtgys() {
    await CtgyActions.findFirstCtgyList()
    FstToThrdCtgy.firstCtgyList.value = ctgyGettersProxy.getFirstCtgyList
    console.log(ctgyGettersProxy.getFirstCtgyList)
  }

  static changeTab(index: number) {
    FstToThrdCtgy.firstCtgyActiveIndex.value = index
  }
  static async getSecThrdCtgyList() {
    watchEffect(async () => {
      await CtgyActions.findSecThrdCtgyList(FstToThrdCtgy.firstCtgyActiveIndex.value + 1)
      FstToThrdCtgy.secondCtgyList.value = ctgyGettersProxy.getSecondCtgyList
      console.log(24, FstToThrdCtgy.secondCtgyList.value)
    })
  }
  static changeReady(secondCtgy: SecondCtgy) {
    secondCtgy.isReadyOpen = !secondCtgy.isReadyOpen
    console.log(FstToThrdCtgy.secondCtgyList.value)
  }
}
export default FstToThrdCtgy
